<template>
  <div>
    <el-tabs v-model="activeName">
        <el-tab-pane label="基础信息" name="Datas">
            <el-form :model="model" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm page-form">

                <el-row>
                    <el-col :span="8">
                            <el-form-item label="采购单编号" prop="Number">
                                <el-input v-model="model.Number" placeholder="请输入采购单编号"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="外部系统id" prop="ExternalId">
                                <el-input v-model="model.ExternalId" placeholder="请输入外部系统id"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="币种" prop="Currency">
                                    <el-select v-model="model.Currency" placeholder="请输入币种" allow-create filterable>
                                        <el-option label="人民币" value="人民币"></el-option>
                                        <el-option label="英镑" value="英镑"></el-option>
                                        <el-option label="哈萨克斯坦里格 " value="哈萨克斯坦里格 "></el-option>
                                        <el-option label="泰国铢" value="泰国铢"></el-option>
                                        <el-option label="欧元" value="欧元"></el-option>
                                    </el-select>
                            </el-form-item>
                        </el-col>
                </el-row>

                 <el-row>
                      <el-col :span="8">
                            <el-form-item label="供应商名称" prop="VendorId">
                                <el-select :value="model.VendorName" placeholder="请选择供应商名称" @change="VendorChange">
                                    <el-option v-for="Vendor in VendorList" :key="Vendor.Id"
                                        :label="Vendor.VendorName" :value="Vendor"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                       
                         <el-col :span="8">
                            <el-form-item label="入库仓" prop="WarehouseId">
                                 <el-select :value="model.WarehouseName" placeholder="请选择入库仓" @change="WarehouseChange">
                                    <el-option v-for="Warehouse in WarehouseList" :key="Warehouse.Id"
                                        :label="Warehouse.WarehouseName" :value="Warehouse"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="采购状态" prop="s">
                               <el-select v-model="model.Status" >
                                    <el-option label="待审核" value="0"></el-option>
                                    <el-option label="已审核" value="1"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                </el-row>

                  <el-row>
                        <el-col :span="8">
                            <el-form-item label="交货日期" prop="DeliveryDate">
                                 <el-date-picker v-model="model.DeliveryDate" type="datetime"
                                    placeholder="选择交货日期"></el-date-picker>
                            </el-form-item>
                        </el-col>
                         <el-col :span="8">
                            <el-form-item label="是否含税" prop="IsTax">
                                <el-radio-group v-model="model.IsTax">
                                    <el-radio label="Y">是</el-radio>
                                    <el-radio label="N">否</el-radio>
                                </el-radio-group>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="付款日期" prop="PaymentTime">
                                <el-date-picker v-model="model.PaymentTime" type="datetime"
                                    placeholder="选择付款日期"></el-date-picker>
                            </el-form-item>
                        </el-col>
                </el-row>

                    <el-row>
                        <el-col :span="8">
                            <el-form-item label="付款账户" prop="PaymentAccount">
                                <el-input v-model="model.PaymentAccount" placeholder="请输入付款账户"></el-input>
                            </el-form-item>
                        </el-col>
                         <el-col :span="8">
                            <el-form-item label="付款方式" prop="PaymentCategory">
                                <el-select v-model="model.PaymentCategory">
                                    <el-option label="现金交易" value="现金交易"></el-option>
                                    <el-option label="银行支付" value="银行支付"></el-option>
                                    <el-option label="微信支付" value="微信支付"></el-option>
                                    <el-option label="支付宝支付" value="支付宝支付"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                         <el-col :span="8">
                            <el-form-item label="货物状态" prop="State">
                                <el-select v-model="model.State">
                                    <el-option label="未到货" value="0"></el-option>
                                    <el-option label="部分到货" value="1"></el-option>
                                    <el-option label="全部到货" value="2"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                </el-row>

                    <el-row>
                        <el-col :span="8">
                            <el-form-item label="联系人" prop="VendorContact">
                                <el-input v-model="model.VendorContact"  placeholder="请输入联系人"></el-input>
                            </el-form-item>
                        </el-col>
                          <el-col :span="8">
                            <el-form-item label="联系人电话" prop="VendorContactTel">
                                <el-input v-model="model.VendorContactTel"  placeholder="请输入联系人电话"></el-input>
                            </el-form-item>
                        </el-col>
                         <el-col :span="8">
                            <el-form-item label="备注" prop="Remark">
                                <el-input v-model="model.Remark"></el-input>
                            </el-form-item>
                        </el-col>
                </el-row>
                <el-row>
                     <el-col :span="8">
                            <el-form-item label="不含税总价" prop="Total">
                                <el-input v-model="model.Total" @change="handleTaxChange" readonly></el-input>
                            </el-form-item>
                        </el-col>
                         <el-col :span="8">
                            <el-form-item label="含税总价" prop="TaxTotal">
                                <el-input v-model="model.TaxTotal" @change="handleTaxChange" readonly></el-input>
                            </el-form-item>
                        </el-col>
                </el-row>
               
                </el-form>
                
        </el-tab-pane>
        <el-tab-pane label="添加商品" name="AddProduct">
            <div class="page-tool">
                 <el-button type="primary" plain icon="el-icon-plus" @click="addMachine" size="small">新增</el-button>
                <el-button type="danger" plain icon="el-icon-delete" size="small" @click="delMachine">删除</el-button>
            </div>

            <el-table :data="tableData" ref="dataForm" v-loading="isLoading" height="300" show-summary :summary-method="getSummaries">
                <el-table-column type="selection" width="70"></el-table-column>
                <el-table-column prop="ItemCode" label="产品ID" :show-overflow-tooltip="true"></el-table-column>
                <el-table-column prop="ItemName" label="物料名称" :show-overflow-tooltip="true"></el-table-column>
                <el-table-column prop="Model" label="型号" :show-overflow-tooltip="true"></el-table-column>
                <el-table-column prop="Spec" label="规格" :show-overflow-tooltip="true"></el-table-column>
                <el-table-column prop="CurrCount" label="当前库存" :show-overflow-tooltip="true"></el-table-column>
                <el-table-column prop="UnitOfMeasure" label="单位" :show-overflow-tooltip="true"></el-table-column>
                <el-table-column prop="Amount" label="金额" :show-overflow-tooltip="true"></el-table-column>
                <el-table-column prop="TaxPrice" label="含税单价" :show-overflow-tooltip="true"></el-table-column>
                <el-table-column prop="TaxAmount" label="含税金额" :show-overflow-tooltip="true"></el-table-column>
                <el-table-column prop="Count" label="数量" :show-overflow-tooltip="true">
                    <template slot-scope="scope">
                        <el-input v-model="scope.row.Count" @change="handleTaxChange(scope.row)"/>
                    </template>
                </el-table-column>
                <el-table-column prop="Price" label="商品单价" :show-overflow-tooltip="true">
                        <template slot-scope="scope">
                            <el-input v-model="scope.row.Price" @change="handleTaxChange(scope.row)"></el-input>
                        </template>
                    </el-table-column>
                 <el-table-column prop="Tax" label="税率" :show-overflow-tooltip="true">
                        <template slot-scope="scope">
                            <el-input v-model="scope.row.Tax" @change="handleTaxChange(scope.row)"></el-input>
                        </template>
                    </el-table-column>
                <el-table-column prop="Remark" label="备注" :show-overflow-tooltip="true"></el-table-column>
                    <el-table-column label="操作" :show-overflow-tooltip="true">
                        <template slot-scope="scope">
                            <el-button type="text" @click="del(scope.row)">移除</el-button>
                        </template>
                    </el-table-column>
            </el-table>
        </el-tab-pane>
    </el-tabs>
        <div class="page-form-action">
            <el-button @click="resetForm">重置</el-button>
            <el-button type="primary" @click="submitForm">{{ isUpdate ? '立即保存' : '立即创建' }}</el-button>
            
        </div>
    
     <!-- 弹窗 -->
        <el-dialog append-to-body :close-on-click-modal="false" :title="dialogDomain.title"
         :visible.sync="dialogDomain.dialogVisible" width="60%">
            <SelectedItemFourStock   :ItemList="tableData" :WareHouseId="model.WarehouseId.toString()" @callback="AddBomCallBack" 
         v-if="dialogDomain.dialogVisible " />
      </el-dialog>  
  </div>
</template>

<script>
import SelectedItemFourStock from '@/views/Product/ProductView/components/SelectedItemFourStock.vue';
export default {
    components:{
        SelectedItemFourStock
    },
    props:{
       model: {
            require: true,
            type: Object
        },
        isUpdate: {
            require: true,
            type: Boolean
        },
        WarehouseList:{
            type: Array,
            required: true
        },
        VendorList:{
            type: Array,
            required: true
        },
    },
data(){
     var validatePhone = ( rule,value, callback) => {
            var emalRule= /^\d{11}$/;
            if (!value) {
            return callback(new Error('请输入联系电话'));
            } else if (!emalRule.test(value)) {
            callback(new Error('请输入正确联系电话'));
            } else {
            callback();
            }
        };
    return{
        activeName: 'Datas',
        pageDomain:{
            PageIndex:1,
            PageSize:10,
            TotalCount:0,
        },
        tableData:[],
        isLoading:false,
        //对话框对象
            dialogDomain:{
                title:'添加产品',
                dialogVisible:false
            },
        rules:{
            Number: { required: true, message: '请输入采购单编号', trigger: 'blur' },
            ExternalId: { required: true, message: '请输入外部系统id', trigger: 'blur' },
            Currency: { required: true, message: '请输入币种', trigger: 'blur' },
            VendorId: { required: true, message: '请选择供应商名称', trigger: 'blur' },
            VendorContact: { required: true, message: '请输入联系人', trigger: 'blur' },
            VendorContactTel:  { validator: validatePhone, trigger: 'blur' }   ,
            PaymentCategory: { required: true, message: '请选择付款方式', trigger: 'blur' },
            PaymentAccount: { required: true, message: '请输入付款账户', trigger: 'blur' },
            PaymentTime: { required: true, message: '请选择付款日期', trigger: 'blur' },
            WarehouseId: { required: true, message: '请选择入货仓', trigger: 'blur' },
            DeliveryDate: { required: true, message: '请选择交货日期', trigger: 'blur' },
            Status: { required: true, message: '请选择采购状态', trigger: 'blur' },
            State: { required: true, message: '请选择货物状态', trigger: 'blur' },
        }
    }
},
created(){
    if (this.isUpdate)
            this.GetOrderPoId();
},
   methods:{
    calcPrice(){
             //计算总价
            let sum = 0.0;
            let taxTotal = 0.0;
            this.tableData.map(item => {
                sum+=item.Amount-item.Amount*item.Tax;

                taxTotal+=item.Amount*item.Tax;

            })
            this.model.Total = sum;
            this.model.TaxTotal = taxTotal;
        },
         getSummaries(param) {
            const { columns, data } = param;
            const sums = [];
            columns.forEach((column, index) => {
                if (index === 0) {
                    sums[index] = '总价';
                    return;
                }
                if (column.property === 'Amount' ||column.property === 'TaxPrice' ||column.property === 'TaxAmount' || column.property === 'Price') {
                    const values = data.map(item => Number(item[column.property]));
                    

                    if (!values.every(value => isNaN(value))) {
                        sums[index] = values.reduce((prev, curr) => {
                            const value = Number(curr);
                            if (!isNaN(value)) {
                                return prev + curr;
                                
                            } else {
                                return prev;
                            }
                        }, 0);
                        sums[index] += ' 元';
                    } else {
                        sums[index] = '';
                    }
                }
                else {
                    sums[index] = '';
                }
                
            });
            return sums;
        },

        VendorChange(model){
            this.model.VendorId=model.Id;
            this.model.VendorName=model.VendorName;
            console.log(model);
        },
        WarehouseChange(model){
            this.model.WarehouseId = model.Id;
            this.model.WarehouseName=model.WarehouseName;
            console.log(model)
        },
        addMachine(){
            if (this.model.WarehouseId == '' || this.model.WarehouseId == undefined) {
                this.showNotify('请选择仓库');
                return;
            }
            this.dialogDomain.title = "选择商品";
            this.dialogDomain.dialogVisible = true;
        },
        handleTaxChange(row){
             if(row.Tax>1){
                row.Tax=1;
                this.showNotify('税率应为0~1之间（0.13=13%）');
            }
            if(row.Tax>0){
                row.TaxPrice = (row.Price * (1 + Number(row.Tax))).toFixed(2); // 含税单价
                row.TaxAmount = (row.TaxPrice * row.Count).toFixed(2); // 含税金额
            }
            else{
                row.TaxPrice = row.Price; // 含税单价
                row.TaxAmount = (row.TaxPrice * row.Count).toFixed(2);
            }

            row.Amount = (row.Count * row.Price).toFixed(2);//金额
         
            this.calcPrice();
            
        },
        delMachine(){
            if(this.$refs.dataForm.selection.length<=0)
            {
                this.showNotify('请选择一项');
                return;
            }
            this.$refs.dataForm.selection.forEach(row=>{
                const index=this.tableData.indexOf(row);
                this.tableData.splice(index,1);
            });
        },
        del(model){
            let index=this.tableData.indexOf(model);
            this.tableData.splice(index,1);
        },
        submitForm(){
            this.$refs['ruleForm'].validate((valid) => {
                if (valid) {

                    if (this.isUpdate) {
                        this.put();
                    }
                    else {
                        this.add();
                    }

                } else {
                    this.showNotify('请输入必填项');
                    return false;
                }
            });
        },
        resetForm(){
            this.$refs['ruleForm'].resetFields();
        },
        add(){
            this.$http.postForm('/api/OrderPo',{model:this.model,OrderPoItemString:JSON.stringify(this.tableData)},{loading:this.$loading()})
            .then(res=>{
                this.$emit('callback');
                console.log(res);
            })
        },
        put() {
            this.$http.putForm('/api/OrderPo', { model: this.model,OrderPoItemString:JSON.stringify(this.tableData) }, { loading: this.$loading() })
                .then((res) => {
                    this.$emit('callback');
                console.log(res); 
                })
        },
        GetOrderPoId(){
            this.isLoading=true;
            this.$http.get('/api/OrderPo/GetOrderPoId',{
                params:{
                    OrderPoId:this.model.Id,
                    WarehouseId: this.model.WarehouseId
                }
            })
            .then(res=>{
                console.log(res)
                this.isLoading=false;
                this.tableData=res.Data;
            })
        },
       AddBomCallBack(){
        this.dialogDomain.dialogVisible=false;
        console.log(this.tableData)
        let arr = [];
        this.tableData.map(x=>{
            var obj=new Object();
            this.$set(obj, 'Amount', x.Amount|| x.SalePrice  );
            this.$set(obj, 'TaxAmount', x.TaxAmount|| 0);
            this.$set(obj, 'TaxPrice', x.TaxPrice|| 0);
            this.$set(obj, 'Tax', x.Tax || 0);
            this.$set(obj, 'Remark', x.Remark);
            this.$set(obj, 'Price', x.Price ||x.SalePrice);
            this.$set(obj, 'Count', x.Count || 1);
            this.$set(obj, 'ItemId', x.ItemId);
            this.$set(obj, 'Spec', x.Spec);
            this.$set(obj, 'ItemName', x.ItemName);
            this.$set(obj, 'ItemCode', x.ItemCode);
            this.$set(obj, 'Model', x.Model);
            this.$set(obj, 'CurrCount', x.CurrCount);
            this.$set(obj, 'UnitOfMeasure', x.UnitOfMeasure);
            arr.push(obj);
        })
        this.tableData=arr;
        this.calcPrice();
       }
   }
}
</script>

<style>

</style>